<template>
	<view class="complaints" :style="{ paddingTop: StatusBar + 'px' }">
		<view class="complaints_header">
			<view class="header_back" @click="navigateBack()">
				<text class="iconfont icon-Left"></text>
			</view>
			<view class="header_title">投诉建议</view>
			<view class="header_btn" @click="navigateTo('complaint_service')">
				<text class="iconfont icon-jilu"></text>
				<text class="btn_text">投诉记录</text>
			</view>
		</view>
		<view class="loan_box">
			<view class="loan_list" @click="navigateTo('complaint_records')">
				<view class="list_item">
					<view class="item_bottom">
						<view class="bottom_item flex">
							<view><image class="names-image" src="../../static/my/icon_投诉@2x.png"></image></view>
							<view class="names-text">
								<view class="names">投诉服务</view>
								<view class="names_1">交易投诉、售后投诉</view>
							</view>
						</view>

						<view class="bottom_item">
							<view class="notice_more">
								<text class="iconfont icon-Right"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="loan_box">
			<view class="loan_list" @click="navigateTo('suggested')">
				<view class="list_item">
					<view class="item_bottom">
						<view class="bottom_item flex">
							<view><image class="names-image" src="../../static/my/icon_建议@2x.png"></image></view>
							<view class="names-text">
								<view class="names">建议反馈</view>
								<view class="names_1">产品功能建议、bug反馈</view>
							</view>
						</view>

						<view class="bottom_item">
							<view class="notice_more">
								<text class="iconfont icon-Right"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			StatusBar: this.StatusBar,
			textList: []
		};
	},
	methods: {}
};
</script>

<style>
page {
	background: #f7f8fa;
}
</style>
<style lang="scss" scoped>
.complaints {
	font-weight: bold;
	background-image: url(../../static/my/bg投诉建议@2x.png);
	background-repeat: no-repeat;
	background-size: 100%;
	overflow: hidden;
	.complaints_header {
		display: flex;
		align-items: center;
		padding: 28rpx 32rpx;
		position: relative;
		.header_back {
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.header_title {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.header_btn {
			margin-left: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #22150b;
			.iconfont {
				font-size: 40rpx;
			}
			.btn_text {
				margin-top: 4rpx;
				font-size: 24rpx;
			}
		}
	}
}
.btn_class_1 {
	margin-left: 30rpx;
}
.loan_box {
	background-color: #fff;
	width: 90%;
	margin: 50rpx auto;
	border-radius: 10rpx;

	box-sizing: border-box;

	.loan_list {
		background-color: #fff;
		height: 200rpx;
		line-height: 150rpx;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		.list_item {
			padding: 0 10rpx;

			.item_bottom {
				display: flex;
				margin-top: 20rpx;
				padding-bottom: 5rpx;
				width: 100%;
				justify-content: space-between;
				.bottom_item {
					.names {
						font-weight: 500;
						font-size: 28rpx;
						color: #22150b;
						line-height: 70rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					.names_1 {
						font-weight: 500;
						font-size: 24rpx;
						color: #b0b0b0;
						line-height: 60rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					.names-text {
						margin-left: 20rpx;
					}
					.names-image {
						width: 150rpx;
						height: 140rpx;
					}
					.iconfont {
						line-height: 50rpx;
						margin-left: 8rpx;
						font-size: 14rpx;
						font-weight: bold;
						color: #aeaeae;
					}
				}
			}
		}
	}
}
.nav-class {
	position: relative;
	margin-top: 100rpx;
}
.flex {
	display: flex;
}
</style>
